<template>
  <div class="category-main">
    <span style="float: left;">{{ todo.name }}</span>
    <span style="float: right;font-size: 12px;color: #999aaa">{{ todo.total }}篇</span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {ICategory} from "@/interface/category";

export default defineComponent({
  name: "Category",
  props: {
    todo: {
      type: Object as () => ICategory,
      require: true,
    }
  },

  setup() {
    return {
    }
  }
})
</script>

<style scoped>
.category-main {
  margin-bottom: .4rem;
  padding: .4rem .8rem;
  border-radius: .25rem;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
  height: 2rem;
  line-height: 2rem;
}
.category-main:hover {
  cursor: pointer;
}
</style>
